<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<u-modal :showConfirmButton="false" title="提示" :content-slot="false" :show="showPayModal">
				<view class="slot-content">
					<view class="t-wrap">
						<view style="width: 410rpx; margin-left: 50rpx">{{ content }}</view>
						<view v-if="!isIOS" class="t-middle">您还不是会员，请联系您的专属服务管家领取新会员福利</view>
						<view v-else class="t-middle">iOS用户暂不支持此服务，请联系您的专属服务管家</view>
					</view>
					<u-button v-if="!isIOS" text="去升级成为半年或年度会员" type="success" shape="circle"
						@click="onPayConfirm"></u-button>
					<u-button v-else text="iOS用户暂不支持此服务" type="warning" shape="circle" disabled></u-button>
					<view @tap="handleCancel" class="b-middle">下次再来</view>
				</view>
			</u-modal>
			<view class="my_container_body_body">
				<view class="body_one">
					<image mode="aspectFill" :src="busPubInfo.briefUserInfo.avatar"></image>
				</view>
				<view class="body_two">
					<view class="body_two_head">{{ busPubInfo.briefUserInfo.nickName }}</view>
					<view class="body_two_fotter">
						<view class="title_o">{{ busPubInfo.briefUserInfo.vipTypeName }}</view>
						<view style="font-size: 20rpx" class="title_b" v-if="busPubInfo.briefUserInfo.province">
							{{ showLocation(busPubInfo.briefUserInfo.province, busPubInfo.briefUserInfo.city) }}
						</view>
					</view>
				</view>
				<view class="btn-wrap">
					<view @click="guanzhuorquxiaoguanzhu" class="body_three">
						{{ busPubInfo.briefUserInfo.collectFlag == 1 ? '取消关注' : '关注' }}
					</view>
					<view style="display: flex; margin-top: 10rpx" class="">
						<view class="title_t" @click="lookMarket(busPubInfo.userId)">查看商家</view>
						<view class="iamge_three" @click="lookMarket(busPubInfo.userId)">
							<image src="../../static/imags/Down_(下).png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="my_container_body_card">
				<view class="head">
					<view class="title_one">资源分类</view>
					<image class="img" src="../../static/images/right.png" mode="scaleToFill"></image>
					<view class="title">{{ busPubInfo.product1 }}</view>
					<image class="img" src="../../static/images/right.png" mode=""></image>
					<view class="title_two">{{ busPubInfo.product2 }}</view>
					<image class="img" src="../../static/images/right.png" mode=""></image>
					<view class="title_three">{{ busPubInfo.product3 }}</view>
				</view>
				<view class="xian"></view>
				<view class="my_input">
					<view class="my_input_head">
						<view class="head_left"></view>
						<view class="head_head">{{ busPubInfo.title }}</view>
						<view class="head_input">{{ busPubInfo.resourceType == 1 ? '出售' : '求购' }}</view>
					</view>
					<view class="my_input_body">
						{{ busPubInfo.pubContent }}
					</view>
				</view>
				<view class="photoShow" v-if="busPubInfo.picList != null && busPubInfo.picList.length > 0">
					<view class="photoShowItem" v-for="(item, index) in busPubInfo.picList">
						<image @click="previewMyImage(index)" mode="aspectFill" :src="item.fileUrl" :key="index">
						</image>
					</view>
				</view>
				<!-- <view class="txShow" v-else>暂未上传图片</view> -->
				<view class="videoShow" v-if="busPubInfo.videoOssIdUrlStr">
					<video id="myVideo" controls="false" class="video-player" :src="busPubInfo.videoOssIdUrlStr"
						@tap="handleVideoClick" @fullscreenchange="onVideoFullscreenChange"
						:style="{ width: videoWidth + 'rpx', height: videoHeight + 'rpx', marginLeft: '30rpx' }"></video>
				</view>
				<view class="videoShow" style="text-align: center" v-else>
					<!-- <view>暂未上传视频</view> -->
				</view>
				<view class="fotter_input">
					<view class="fotter_input_one">
						<view>
							<view class="fotter_input_one_t">发布时间:{{ busPubInfo.createTime }}</view>
						</view>
						<view v-if="busPubInfo.price" style="display: flex">
							<view class="fotter_input_head_o">￥{{ busPubInfo.price }}</view>
							<view class="fotter_input_head_tt">元/吨</view>
						</view>
						<view v-else style="display: flex">
							<view class="fotter_input_head_o">￥电议</view>
						</view>
					</view>
					<view class="fotter_input_body">
						<image class="fotter_input_body_o" src="/static/imags/dingwei.png" mode=""></image>
						<!-- <view class="fotter_input_body_o">位置</view> -->
						<view class="fotter_input_body_tw" v-if="busPubInfo.province">
							{{ showLocation(busPubInfo.province, busPubInfo.city) }}
						</view>
						<!-- <view class="fotter_input_body_t">距您{{ busPubInfo.distance == null ? '' : busPubInfo.distance }}公里</view> -->
					</view>
				</view>
				<view style="height: 10rpx"></view>
			</view>
			<view class="show_phone">
				<image src="../../static/imags/guanjia2.png"></image>
				<view class="cell-wrap">
					<view class="linkphone" @click="showGuanjia">联系专属服务管家</view>
					<view class="cell-foot" @click="handlePhoneCall">
						<image class="fotter_input_head_f" src="../../static/imags/tel.png"></image>
						<view class="fotter_input_head_t">联系电话</view>
					</view>
				</view>
			</view>
			<view class="show_text">
				<view>
					声明:废纸和废塑料属于非标商品，您在本平台发布和浏览信息，然后去线下交易，属于自行负责的商业贸易行为。以上信息内容的真实性、准确性由该信息的发布人负责，平台不参与交易，请注意交易的风险性由交易双方自行承担负责。
				</view>
			</view>
		</view>
		<view class="ft">
			<view class="ft_item_wrap">
				<view class="ft_item">
					<image src="../../static/imags/liulanliang.png"></image>
					<view>{{ busPubInfo.viewCount == null ? 0 : busPubInfo.viewCount }}</view>
				</view>
				<view class="ft_item" @click="handleLike()">
					<image v-if="busPubInfo.favoriteFlag == 1" src="../../static/images/like1.png"></image>
					<image v-else src="../../static/images/collect.png"></image>
					<view>{{ busPubInfo.favoriteCount == null ? 0 : busPubInfo.favoriteCount }}</view>
				</view>
				<view class="ft_item" @click="shouchang()">
					<image v-if="busPubInfo.collectFlag == 1" src="../../static/images/shoucang1.svg"></image>
					<image v-else src="../../static/images/shoucang.svg"></image>
					<view>{{ busPubInfo.collectCount == null ? 0 : busPubInfo.collectCount }}</view>
				</view>
				<view class="ft_item" @click="toggleComment()">
					<image src="../../static/images/message.png"></image>
					<view>{{ busPubInfo.commentCount == null ? 0 : busPubInfo.commentCount }}</view>
				</view>
				<view class="ft_item" @click="openJubao()">
					<image src="../../static/imags/jubao.png"></image>
					<view></view>
				</view>
				<view class="ft_item">
					<image src="../../static/images/zhaunfa.png"></image>
					<button open-type="share" class="hidden-share-btn" @tap.stop="handShareCountAdd"></button>
					<view>{{ busPubInfo.shareCount }}</view>
				</view>
			</view>
		</view>
		<u-overlay :show="show" :duration="400" :z-index="999" :opacity="0.5" @click="canle">
			<view class="show_pic">
				<view class="show_head">
					<image class="show_head_o" src="../../uni_modules/zhouWei-APPshare/static/icon_weixin.png"></image>
					<view class="show_head_t">
						<view>废纸管家-安夏</view>
						<view>15396802565</view>
					</view>
				</view>
				<image class="show_p" show-menu-by-longpress="true"
					src="https://market-fenjie-1331975401.cos.ap-nanjing.myqcloud.com/2025/01/18/e0abffdb59e249ba9c5755fe99ea4b20.png">
				</image>
				<view class="show_footer">您在使用过程中有什么问题都可以联系您的专属管家</view>
			</view>
		</u-overlay>
		<u-popup :show="pinglun" mode="bottom" @close="showPinglun" @open="openPinglun">
			<view style="height: 300rpx; width: 750rpx">
				<view style="height: 170rpx; margin-top: 15rpx; width: 686rpx; margin-left: 32rpx">
					<u--textarea v-model="comment" placeholder="请输入留言"></u--textarea>
				</view>
				<view style="margin-top: 15rpx; height: 80rpx; width: 686rpx; margin-left: 32rpx">
					<u-button @click="liuyan" type="primary" text="添加留言"></u-button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="jubao" mode="bottom" @close="showJubao" @open="openJubao">
			<view style="height: 300rpx; width: 750rpx">
				<view style="height: 170rpx; margin-top: 15rpx; width: 686rpx; margin-left: 32rpx">
					<u--textarea v-model="reason" placeholder="请输入举报内容"></u--textarea>
				</view>
				<view style="margin-top: 15rpx; height: 80rpx; width: 686rpx; margin-left: 32rpx">
					<u-button @click="addJubao" type="primary" text="添加举报"></u-button>
				</view>
			</view>
		</u-popup>
		<uni-popup ref="commentPopup" type="bottom" :safe-area="false" :mask-click="true"
			@touchmove.stop.prevent="moveHandle" @mask-click="handleMaskClick" :height="250"
			class="comment-popup-wrapper" @tap.stop>
			<view style="height: 800rpx" class="comment-drawer" @tap.stop>
				<view class="comment-header">
					<u-subsection fontSize="14" activeColor="#19E820" bgColor="#ffffff" mode="button" keyName="name"
						@change="sectionChange" :list="tabList" :current="curNow"></u-subsection>
				</view>
				<!-- 滚动评论区域 -->
				<scroll-view scroll-y class="comment-list">
					<view class="comment-wrap" v-if="curNow == 0">
						<view v-for="(item, index) in commentList" :key="index" class="comment-item">
							<image class="avatar" @tap="lookMarket(item.briefUserInfo.userId)"
								:src="item.briefUserInfo.avatar" />
							<view class="content">
								<view class="content-item" @touchstart="handleTouchStart" @touchend="handleTouchEnd"
									@touchcancel="handleTouchEnd" @longpress.prevent="handleLongPress(item)">
									<text class="username">{{ item.briefUserInfo.nickName }}</text>
									<text class="time">{{ item.createTime }}</text>
									<text class="text">{{ item.comment }}</text>
								</view>
								<view v-if="item.expanded">
									<view v-for="(item1, index1) in item.children" @touchstart="handleTouchStart"
										@touchend="handleTouchEnd" @touchcancel="handleTouchEnd"
										@longpress.stop="handleLongPress(item1)" :key="index1" class="child-content">
										<view class="c-head">
											<view class="c-cover">
												<image @tap="lookMarket(item1.briefUserInfo.userId)" class="avatar"
													:src="item1.briefUserInfo.avatar" />
											</view>
											<view class="c-name">
												{{ item1.briefUserInfo.nickName }}
												<text>{{ item1.createTime }}</text>
											</view>
										</view>
										<view class="c-content">
											{{ item1.comment }}
										</view>
									</view>
								</view>
								<!-- 展开按钮 -->
								<view v-show="item.children.length > 0" class="expand-btn"
									@tap="handleExpand(item, index)">
									<text>{{ item.expanded ? '收起' : '展开' }}{{ item.children.length }}条回复</text>
									<text class="arrow">{{ item.expanded ? '▲' : '▼' }}</text>
								</view>
							</view>
							<view class="c-btn">
								<text @tap="handleReply(item)">回复</text>
							</view>
						</view>
					</view>
					<view class="like-wrap" v-if="curNow == 1">
						<view v-for="(item, index) in likeList" :key="index" class="comment-item">
							<image class="avatar" @tap="lookMarket(item.userId)" :src="item.avatar" />
							<view class="content">
								<text class="username">{{ item.nickName }}</text>
								<view class="like-time">
									<text class="time">{{ item.customDate }}</text>
									<text class="text">{{ item.province ? item.province : '未知' }}</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 输入框区域 -->
				<view class="input-area" v-if="curNow == 0">
					<input @blur="onInputBlur" v-model="conmment"
						:placeholder="commentName ? '回复@' + commentName : '请输入内容'" :focus="inputFocus"
						class="comment-input" clearable />
					<button class="send-btn" @tap="handleSend">发送</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import locationFormatter from '@/util/locationFormatter';
	import { mapState } from 'vuex'; // 关键导入
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				busPubInfo: {
					collectFlag: 0
				},
				pageTitle: '数码印花纸出售一车',
				show: false,
				operateType: '',
				pinglun: false,
				comment: '',
				jubao: false,
				reason: '',
				showPayModal: false,
				showComment: false,
				scrollHeight: 0, // 动态计算高度
				commentList: [],
				conmment: '',
				inputFocus: false, // 控制输入框聚焦
				keyboardHeight: 0, // 新增键盘高度监听
				hasInputContent: false, // 标记是否有输入
				commentName: '',
				tabList: [],
				curNow: 0,
				likeList: [],
				videoContext: null,
				videoWidth: 0,
				videoHeight: 0,
				isFullScreen: false, // 是否全屏
				isPlaying: false, // 是否正在播放
				isIOS: false // 新增是否iOS平台标志
			};
		},
		onLoad(e) {
			// 新增平台判断
			this.isIOS = uni.getSystemInfoSync().platform === 'ios';
			uni.$on('updateStatus', (data) => {
				console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);
				this.showPayModal = false;
			});
			// this.getMyLoction();
			this.busPubInfo.id = e.id;
			this.pageTitle = e.title;
			if (e.from == 'message') {
				this.$refs.commentPopup.open('bottom');
			}
			this.getDetail();
			this.getCommentLst();
			this.getLikeList();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: this.pageTitle, //分享的名称
				path: `/page/detail/index?id=${this.busPubInfo.id}`,
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.pageTitle,
				path: `/page/detail/index?id=${this.busPubInfo.id}`,
				mpId: 'wx312947ac8d5e65e9' //此处配置微信小程序的AppId
			};
		},
		computed: {
			...mapState(['userInfo', 'pubInfoUserInfo'])
		},
		mounted() {
			// 初始化视频尺寸
			this.calcVideoSize();
			// 创建视频上下文
			this.videoContext = uni.createVideoContext('myVideo', this);
		},
		methods: {
			showLocation(pro, city) {
				const displayName = locationFormatter.format(pro, city);
				return displayName;
				console.log(displayName); // 输出：浙江杭州
			},
			calcVideoSize() {
				const systemInfo = uni.getSystemInfoSync();
				this.videoWidth = 144; // 左右各20rpx边距
				this.videoHeight = 144; // 与图片高度一致
			},
			// 视频点击处理
			handleVideoClick() {
				if (!this.isFullScreen) {
					// 首次点击：进入全屏并播放
					this.videoContext.requestFullScreen({ direction: 0 });
					this.videoContext.play();
					this.isPlaying = true;
				} else {
					// 全屏状态下点击：切换播放/暂停
					if (this.isPlaying) {
						this.videoContext.pause();
					} else {
						this.videoContext.play();
					}
					this.isPlaying = !this.isPlaying;
				}
			},
			// 全屏事件监听
			onVideoFullscreenChange(e) {
				this.isFullScreen = e.detail.fullScreen;
				if (!this.isFullScreen) {
					// 退出全屏时暂停
					this.videoContext.pause();
					this.isPlaying = false;
				}
			},
			//切换
			sectionChange(index) {
				this.inputFocus = false;
				this.commentName = '';
				this.conmmentId = '';
				this.curNow = index;
			},
			handleTouchStart(e) {
				e.currentTarget.classList.add('active');
			},
			handleTouchEnd(e) {
				e.currentTarget.classList.remove('active');
			},
			// 新增长按处理
			handleLongPress(message) {
				if (message.canDelete == '0' || message.canDelete == null) {
					return;
				}
				const isChild = message.parentId != '0'; // 判断是否是回复
				const action = isChild ? '删除这条回复' : '删除这条评论';
				uni.showModal({
					title: '删除确认',
					content: `确定要${action}吗？`,
					success: async (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中...'
							});
							try {
								// 根据类型调用不同接口
								const apiUrl = this.$api.deleteComment;
								const res = await this.$https.post(apiUrl, {
									id: message.id
								});
								if (res.code === 200) {
									// 更新本地数据
									if (isChild) {
										// 删除回复
										this.commentList.forEach((parent) => {
											parent.children = parent.children.filter((child) => child
												.id !== message.id);
										});
									} else {
										// 删除主评论
										this.commentList = this.commentList.filter((item) => item.id !==
											message.id);
									}
									// 更新总数
									this.busPubInfo.commentCount -= 1;
									uni.showToast({
										title: `删除成功`
									});
								}
							} catch (e) {
								console.error('删除失败:', e);
								uni.showToast({
									title: '删除失败',
									icon: 'none'
								});
							} finally {
								uni.hideLoading();
							}
						}
					}
				});
			},
			moveHandle() {},
			// 输入框失去焦点处理
			onInputBlur() {},
			//弹起对话框
			handleReply(item) {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				this.inputFocus = false; // 先重置状态
				this.commentName = '';
				this.conmmentId = '';
				this.commentName = item.briefUserInfo.nickName;
				this.conmmentId = item.id;
				this.$nextTick(() => {
					this.inputFocus = true;
					// uni.pageScrollTo({ scrollTop: 99999, duration: 300 }); // 滚动到底部
				});
			},
			//展开收起评论
			handleExpand(item, index) {
				if (item.expanded) {
					this.commentList[index].expanded = false;
				} else {
					this.commentList[index].expanded = true;
				}
			},
			//获取留言列表
			getCommentLst() {
				this.commentList = [];
				this.$https.post(this.$api.getPubComment, {
					pubInfoId: this.busPubInfo.id,
					pageNum: 1,
					pageSize: 100
				}).then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						// this.commentList = res.data;
						res.rows.forEach((item) => {
							item.expanded = false;
							this.commentList.push(item);
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 开关评论抽屉
			toggleComment() {
				this.commentName = '';
				this.conmmentId = '';
				this.showComment = !this.showComment;
				if (this.showComment) {
					this.$refs.commentPopup.open('bottom');
					this.$nextTick(() => {
						this.calcScrollHeight();
					});
				} else {
					this.$refs.commentPopup.close();
					uni.hideKeyboard(); //
				}
			},
			//发送评论
			handleSend() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				if (!this.conmment) {
					return uni.showToast({
						title: '请输入评论消息',
						icon: 'none'
					});
				}
				console.log(this.conmment);
				uni.showLoading({
					title: '发送中'
				});
				this.$https.post(this.$api.gongqiuliuyan, {
					parentId: this.commentName ? this.conmmentId : '',
					comment: this.conmment,
					pubInfoId: this.busPubInfo.id
				}).then((res) => {
					if (res.code === 200) {
						console.log(res, 666);
						uni.showToast({
							title: '评论成功',
							icon: 'success'
						});
						this.conmment = '';
						this.commentName = '';
						this.conmmentId = '';
						this.busPubInfo.commentCount = this.busPubInfo.commentCount + 1;
						this.tabList = [{
							name: '评论' + '(' + this.busPubInfo.commentCount + ')'
						}, {
							name: '点赞' + '(' + this.busPubInfo.favoriteCount + ')'
						}];
						this.getCommentLst();
					} else {
						uni.hideLoading();
						this.showPayModal = true;
					}
				});
			},
			// 新增遮罩点击处理
			handleMaskClick() {
				this.toggleComment();
				uni.hideKeyboard(); // 同时隐藏键盘
			},
			// 计算滚动区域高度
			calcScrollHeight() {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollHeight = res.windowHeight * 0.65 - 120; // 650rpx高度对应计算
					}
				});
			},
			//增加分享次数
			handShareCountAdd() {
				this.shareTile = this.busPubInfo.title;
				this.$https.post(this.$api.getPubShareCountAdd, {
					id: this.busPubInfo.id
				}).then((res) => {
					if (res.code === 200) {
						this.busPubInfo.shareCount = this.busPubInfo.shareCount + 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//拨打电话
			handlePhoneCall() {
				this.$https.post(this.$api.getPubUser, {
					id: this.busPubInfo.id
				}).then((res) => {
					if (res.code === 200) {
						// 与您界面中"政策专栏"联动的客服电话逻辑
						uni.makePhoneCall({
							phoneNumber: res.data.phonenumber, // 建议使用动态数据绑定政策咨询电话
							success: () => {},
							fail: (err) => {
								console.error('呼叫失败:', err);
								// 兼容微信小程序审核要求（需处理权限问题）
								if (err.errMsg.includes('permission')) {
									this.showAuthGuide(); // 显示类似您界面中的权限引导弹窗
								}
							}
						});
					} else {
						this.showPayModal = true;
					}
				});
			},
			onPayConfirm() {
				uni.navigateTo({
					url: `/page/kaitonghuiyuan/index`
				});
			},
			onPayCancel() {
				this.showPayModal = false;
			},
			getMyLoction() {
				const _that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_that.busPubInfo.userLat = res.latitude;
						_that.busPubInfo.useLon = res.longitude;
						_that.getDistance();
					}
				});
			},
			addJubao() {
				const data = {
					reason: this.reason,
					pubInfoId: this.busPubInfo.id
				};
				this.$https.post(this.$api.gongqiujubao, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '举报成功',
							icon: 'success'
						});
						this.jubao = false;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			openJubao() {
				this.jubao = true;
			},
			showJubao() {
				this.jubao = false;
			},
			liuyan() {
				const data = {
					comment: this.comment,
					pubInfoId: this.busPubInfo.id
				};
				this.$https.post(this.$api.gongqiuliuyan, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: '留言成功',
							icon: 'success'
						});
						this.commentCount = this.commentCount + 1;
						this.pinglun = false;
						this.comment = '';
					} else {
						this.showPayModal = true;
						this.comment = '';
					}
				});
			},
			openPinglun() {
				this.pinglun = true;
			},
			showPinglun() {
				this.pinglun = false;
			},
			//点赞列表
			getLikeList() {
				this.$https.post(this.$api.handleLikePageList, {
					id: this.busPubInfo.id
				}).then((res) => {
					if (res.code === 200) {
						this.likeList = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//点赞
			handleLike() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				var title = '';
				var processType = '';
				if (this.busPubInfo.favoriteFlag == 1) {
					title = '取消点赞成功';
					processType = '0';
				} else {
					title = '点赞成功';
					processType = '1';
				}
				const data = {
					operateType: '2',
					processType: processType,
					pubInfoId: this.busPubInfo.id
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: title,
							icon: 'success'
						});
						this.busPubInfo.favoriteFlag = this.busPubInfo.favoriteFlag == 1 ? 0 : 1;
						if (this.busPubInfo.favoriteFlag == 0) {
							this.busPubInfo.favoriteCount = this.busPubInfo.favoriteCount - 1;
						} else {
							this.busPubInfo.favoriteCount = this.busPubInfo.favoriteCount + 1;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//收藏
			shouchang() {
				if (!this.userInfo.userId) {
					return uni.navigateTo({
						url: '/pages/index/index'
					});
				}
				var title = '';
				var processType = '';
				if (this.busPubInfo.collectFlag == 1) {
					title = '取消收藏成功';
					processType = '0';
				} else {
					title = '收藏成功';
					processType = '1';
				}
				const data = {
					operateType: '1',
					processType: processType,
					pubInfoId: this.busPubInfo.id
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: title,
							icon: 'success'
						});
						this.busPubInfo.collectFlag = this.busPubInfo.collectFlag == 1 ? 0 : 1;
						if (this.busPubInfo.collectFlag == 0) {
							this.busPubInfo.collectCount = this.busPubInfo.collectCount - 1;
						} else {
							this.busPubInfo.collectCount = this.busPubInfo.collectCount + 1;
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			liulan() {
				const data = {
					pubInfoId: this.busPubInfo.id,
					operateType: '1'
				};
				this.$https.post(this.$api.viewCountAdd, data).then((res) => {
					if (res.code === 200) {
						console.log('浏览成功');
						this.busPubInfo.viewCount = this.busPubInfo.viewCount + 1;
					} else {
						console.log('浏览失败');
					}
				});
			},
			getDetail() {
				this.$https.get(this.$api.pubInfoDetail, this.busPubInfo).then((res) => {
					if (res.code === 200) {
						this.busPubInfo = res.data;
						this.pageTitle = res.data.title;
						this.tabList = [{
							name: '评论' + '(' + this.busPubInfo.commentCount + ')'
						}, {
							name: '点赞' + '(' + this.busPubInfo.favoriteCount + ')'
						}];
						this.liulan();
						// this.getDistance();
					} else {
						uni.showToast({
							title: '此信息已删除',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({ delta: 1 });
						}, 1000);
					}
				});
			},
			//获取距离
			getDistance() {
				let param = {
					latFrom: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lat : '32',
					lonFrom: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lon : '122',
					latTo: this.busPubInfo.lat,
					lonTo: this.busPubInfo.lon
				};
				this.$https.post(this.$api.getDistance, param).then((res) => {
					if (res.code === 200) {
						console.log(res, 888);
						this.busPubInfo.distance = parseInt((res.data * 1) / 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			previewMyImage(index) {
				// index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
				var photoList = this.busPubInfo.picList.map((item) => {
					return item.fileUrl;
				});
				uni.previewImage({
					current: index, // 当前显示图片的索引值
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
					loop: true // 是否可循环预览
				});
			},
			lookMarket(id) {
				console.log(this.busPubInfo.briefUserInfo, 44);
				uni.navigateTo({
					url: '/page/market/index?id=' + id
				});
			},
			showGuanjia() {
				this.show = true;
			},
			canle() {
				this.show = false;
			},
			handleCancel() {
				this.showPayModal = false;
			},
			guanzhuorquxiaoguanzhu() {
				var title = '';
				var processType = '';
				if (this.busPubInfo.briefUserInfo.collectFlag == 1) {
					title = '取消关注成功';
					processType = '0';
				} else {
					title = '关注成功';
					processType = '1';
				}
				const data = {
					operateType: '4',
					pubInfoId: this.busPubInfo.briefUserInfo.userId,
					processType: processType
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: title,
							icon: 'success'
						});
						this.busPubInfo.briefUserInfo.collectFlag = this.busPubInfo.briefUserInfo.collectFlag ==
							1 ? 0 : 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 750rpx;
		min-height: 1624rpx;
		background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
		border-radius: 0rpx;
		font-style: normal;
		text-transform: none;
		// position: relative; /* 确保子组件在父组件内部定位 */
		//  z-index: 1; /* 父组件背景层*/
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;

		.t-wrap {
			text-align: center;

			.t-middle {
				margin-top: 30rpx;
				height: 116rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 400;
				font-size: 36rpx;
				color: #ff4400;
				line-height: 58rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}

		.b-middle {
			margin-top: 10rpx;
			text-align: center;
			font-size: 24rpx;
			text-decoration: underline;
		}

		.my_container_body {
			width: 686rpx;
			margin-left: 32rpx;
			padding-bottom: 140rpx;

			// height: 1486rpx;
			.my_container_body_head {
				width: 686rpx;
				height: 196rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				height: 90rpx;
				display: flex;

				.body_one {
					width: 90rpx;
					height: 90rpx;
					border-radius: 84rpx;

					image {
						border: 1rpx solid #fff;
						width: 90rpx;
						height: 90rpx;
						border-radius: 84rpx;
					}
				}

				.body_two {
					// width: 466rpx;
					height: 90rpx;
					margin-left: 14rpx;

					.body_two_head {
						// width: 400rpx;
						height: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 39rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-top: 8rpx;
					}

					.body_two_fotter {
						height: 40rpx;
						margin-top: 8rpx;
						display: flex;
						width: 420rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-style: normal;
						text-transform: none;

						.title_o {
							margin-top: 4rpx;
							height: 32rpx;
							padding: 0 10rpx;
							font-size: 20rpx;
							border-radius: 100rpx 100rpx 100rpx 100rpx;
							border: 2rpx solid #ed6e3e;
							font-size: 20rpx;
							color: #ed6e3e;
							line-height: 30rpx;
							text-align: center;
						}

						.title_b {
							height: 40rpx;
							line-height: 39rpx;
							font-size: 28rpx;
							color: #777777;
							line-height: 39rpx;
							text-align: center;
							font-style: normal;
							text-transform: none;
							margin-left: 22rpx;
						}
					}
				}

				.btn-wrap {
					width: 200rpx;
				}

				.title_t {
					width: 112rpx;
					height: 40rpx;
					line-height: 39rpx;
					font-size: 28rpx;
					color: #777777;
					line-height: 39rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					margin-left: 22rpx;
				}

				.iamge_three {
					width: 32rpx;
					height: 32rpx;
					margin-top: 4rpx;

					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.body_three {
					// width: 116rpx;
					padding: 0 20rpx;
					// height: 58rpx;
					background: #f1b640;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #ffffff;
					line-height: 39rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text-align: center;
					line-height: 58rpx;
					margin-top: 16rpx;
				}
			}

			.my_container_body_card {
				width: 686rpx;
				margin-top: 40rpx;
				background: #ffffff;
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.head {
					// height: 90rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					font-style: normal;
					text-transform: none;
					// line-height: 90rpx;
					display: flex;
					flex-wrap: wrap;
					// align-items: center;
					justify-content: space-around;
					width: 622rpx;
					margin-left: 32rpx;
					padding: 20rpx 0;

					.img {
						width: 40rpx;
						height: 40rpx;
					}

					.title_one {
						text-align: left;
					}

					.title_two {
						margin-left: 5rpx;
						text-align: right;
					}

					.title {
						margin-left: 5rpx;
						text-align: right;
					}

					.title_three {
						margin-left: 5rpx;
						text-align: right;
					}
				}

				.xian {
					width: 622rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #e4e4e4;
					margin-left: 32rpx;
				}

				.my_input {
					width: 686rpx;

					.my_input_head {
						margin: 10rpx 0;
						height: 84rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;
						align-items: center;

						.head_head {
							flex: 1;
							margin-top: 20rpx;
							// width: 432rpx;
							// height: 84rpx;
							// line-height: 84rpx;
							font-size: 32rpx;
							color: #333333;
							font-weight: 550;
							// text-align: center;
						}

						.head_input {
							width: 90rpx;
							height: 38rpx;
							line-height: 10rpx;
							margin-top: 32rpx;
							background: #ff7373;
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #ffffff;
							line-height: 34rpx;
							text-align: center;
						}
					}

					.my_input_body {
						width: 622rpx;
						margin-left: 32rpx;
						margin-top: 10rpx;
						font-weight: 400;
						font-size: 26rpx;
					}
				}

				.photoShow {
					width: 666rpx;
					margin-left: 12rpx;
					height: 144rpx;
					display: flex;
					margin-top: 30rpx;
					line-height: 144rpx;
					text-align: center;

					image {
						height: 144rpx;
						width: 144rpx;
						margin-left: 18rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
					}
				}

				// .photoShowItem image {
				// 	width: 100%;
				// 	height: 300rpx;
				// 	border-radius: 10rpx;
				// }
				.txShow {
					width: 666rpx;
					margin-left: 12rpx;
					height: 144rpx;
					margin-top: 30rpx;
					line-height: 144rpx;
					text-align: center;
				}

				// .videoShow {
				// 	margin-top: 30rpx;
				// 	width: 630rpx;
				// 	margin-left: 28rpx;
				// 	// height: 144rpx;
				// 	// line-height: 144rpx;
				// 	.video1 {
				// 		width: 630rpx;
				// 		// height: 144rpx;
				// 	}
				// }
				/* 新增视频样式 */
				.videoShow {
					margin: 20rpx 0;
				}

				.video-player {
					width: 100%;
					height: 300rpx;
					/* 与图片高度一致 */
					border-radius: 10rpx;
					object-fit: cover;
				}

				.fotter_input {
					width: 686rpx;
					height: 188rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 28rpx;

					.fotter_input_one {
						padding: 0 34rpx;
						display: flex;
						justify-content: space-between;
						font-size: 26rpx;

						.fotter_input_head_o {
							font-weight: 400;
							// font-size: 30rpx;
							color: #ff3939;
						}
					}

					.fotter_input_head {
						height: 94rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;

						.fotter_input_head_tt {
							width: 80rpx;
							line-height: 98rpx;
							font-size: 26rpx;
							margin-left: 5rpx;
						}
					}

					.fotter_input_body {
						height: 94rpx;
						line-height: 94rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;
						align-items: center;

						// .fotter_input_body_f{
						// 	width: 28rpx;
						// 	height: 28rpx;
						// 	margin-top: 33rpx;
						// }
						.fotter_input_body_o {
							width: 50rpx;
							height: 50rpx;
							color: #333333;
						}

						.fotter_input_body_tw {
							margin-left: 10rpx;
							width: 342rpx;
							font-size: 28rpx;
							text-align: left;
							height: 94rpx;
							line-height: 92rpx;
						}

						.fotter_input_body_t {
							width: 200rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #777777;
							text-align: right;
							line-height: 93rpx;
							margin-left: 10rpx;
						}
					}
				}
			}

			.show_text {
				width: 686rpx;
				height: 248rpx;
				background-color: #f7e5e5;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 28rpx;

				// position: relative; /* 保持独立定位 */
				//  z-index: 2; /* 子组件层级高于父组件 */
				view {
					width: 618rpx;
					height: 168rpx;
					margin-top: 20rpx;
					margin-left: 34rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #ff3939;
					line-height: 42rpx;
					text-align: left;
					padding-top: 20rpx;
					// position: relative; /* 保证文字在前 */
					//  z-index: 3; /* 文字层级最高 */
				}
			}

			.show_phone {
				height: 128rpx;
				margin-top: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 88rpx;
					height: 88rpx;
					// margin-left: 13rpx;
				}

				.cell-wrap {
					display: flex;

					.linkphone {
						font-size: 26rpx;
						background-color: #fff;
						padding: 8rpx 12rpx;
						border-radius: 10rpx;
						margin-right: 40rpx;
					}

					.cell-foot {
						display: flex;

						.fotter_input_head_f {
							width: 36rpx;
							height: 36rpx;
							margin-left: 10rpx;
						}

						.fotter_input_head_t {
							font-weight: 400;
							font-size: 26rpx;
							color: #19e820;
							text-align: right;
							margin-right: 0rpx !important;
						}
					}
				}
			}
		}

		.ft {
			margin-top: 20rpx;
			width: 750rpx;
			height: 130rpx;
			line-height: 130rpx;
			background: white;
			z-index: 99;
			position: fixed;
			bottom: 0;

			.ft_item_wrap {
				height: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.ft_item {
					height: 100%;
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 52rpx;
						height: 52rpx;
					}

					view {
						margin-left: 1.6rpx;
						height: 52rpx;
						width: 58rpx;
						line-height: 52rpx;
					}

					.hidden-share-btn {
						position: absolute;
						top: 0;
						left: 0;
						width: 70rpx;
						height: 100rpx;
						opacity: 0;
						z-index: 2;
					}
				}
			}
		}

		.show_pic {
			width: 570rpx;
			height: 790rpx;
			background: #ffffff;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin-left: 90rpx;
			margin-top: 417rpx;

			.show_head {
				height: 204rpx;
				display: flex;

				.show_head_o {
					height: 80rpx;
					width: 80rpx;
					margin-top: 86rpx;
					margin-left: 140rpx;
				}

				.show_head_t {
					margin-left: 20rpx;

					:nth-child(1) {
						// width: 192rpx;
						height: 42rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
						text-align: left;
						margin-top: 86rpx;
					}

					:nth-child(2) {
						// width: 178rpx;
						height: 40rpx;
						line-height: 39rpx;
					}
				}
			}

			.show_p {
				width: 406rpx;
				height: 406rpx;
				margin-left: 84rpx;
				margin-top: 36rpx;
			}

			.show_footer {
				width: 448rpx;
				height: 80rpx;
				font-weight: 550;
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: center;
				margin-left: 62rpx;
				margin-top: 30rpx;
			}
		}

		/* 弹出层容器 */
		.comment-popup-wrapper {
			height: 500rpx;

			::v-deep .uni-popup__wrapper {
				pointer-events: none !important;
				/* 禁止穿透 */
			}

			.comment-drawer {
				pointer-events: auto !important;
				/* 允许内部交互 */
			}
		}

		/* 抽屉主体 */
		.comment-drawer {
			background: #fff;
			height: 800rpx;
			display: flex;
			flex-direction: column;

			/* 头部 */
			.comment-header {
				padding: 32rpx;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.close-icon {
					width: 48rpx;
					height: 48rpx;
				}
			}

			/* 评论列表 */
			.comment-list {
				height: calc(800rpx - 200rpx);
				padding: 0 32rpx;

				.comment-item {
					padding: 24rpx 0;
					display: flex;
					border-bottom: 1rpx solid #f5f5f5;

					.avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 24rpx;
					}

					.content {
						flex: 1;

						.content-item {
							/* 默认样式 */
							background-color: transparent;
							transition: background-color 0.3s;

							/* 添加过渡效果使变化更平滑 */
							&:active {
								/* 长按或按住时的样式 */
								background-color: #dddddd;
								/* 设置为想要的背景颜色 */
							}
						}

						.username {
							font-size: 28rpx;
							color: #666;
							margin-right: 16rpx;
						}

						.time {
							font-size: 24rpx;
							color: #999;
						}

						.text {
							display: block;
							font-size: 28rpx;
							margin-top: 8rpx;
						}

						.like-time {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							color: #999;

							.time {
								font-size: 24rpx;
								margin-right: 20rpx;
							}

							.text {
								margin: 0;
								font-size: 24rpx;
							}
						}

						.child-content {
							margin-top: 10rpx;
							/* 默认样式 */
							background-color: transparent;
							transition: background-color 0.3s;

							/* 添加过渡效果使变化更平滑 */
							&:active {
								/* 长按或按住时的样式 */
								background-color: #dddddd;
								/* 设置为想要的背景颜色 */
							}

							.c-head {
								display: flex;

								.c-cover {
									width: 40rpx;
									height: 40rpx;
									border-radius: 50%;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.c-name {
									margin-left: 10rpx;
									font-size: 24rpx;
									color: #616161;

									text {
										margin-left: 6rpx;
										color: #999;
									}
								}
							}

							.c-content {
								margin-top: 6rpx;
								font-size: 28rpx;
							}
						}

						.expand-btn {
							padding: 10rpx 0;
							font-size: 22rpx;
							color: #75767a;
						}
					}

					.c-btn {
						margin-top: 30rpx;
						display: flex;
						// align-items: center;
						font-size: 26rpx;
						color: #19e820;
					}
				}
			}

			/* 输入区域 */
			.input-area {
				height: 100rpx;
				padding: 20rpx 32rpx;
				border-top: 1rpx solid #eee;
				display: flex;
				align-items: center;
				z-index: 102;

				.comment-input {
					flex: 1;
					height: 80rpx;
					padding: 0 32rpx;
					background: #f5f5f5;
					border-radius: 40rpx;
					font-size: 28rpx;
				}

				.send-btn {
					width: 80rpx;
					height: 80rpx;
					line-height: 80rpx;
					margin-left: 20rpx;
				}
			}
		}

		/* 可以添加一个禁用状态的样式 */
		.u-button[disabled] {
			opacity: 0.6;
		}
	}
</style>